import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { WeaLocaleProvider, WeaMoreButton, WeaRichText, WeaSearchGroup } from 'ecCom';
import { RenderForm } from '../util';

const getLabel = WeaLocaleProvider.getLabel;
@inject('settingStore')
@observer
class AutoRespond extends Component {
  static defaultProps = {
    prefixCls: 'email-setting-auto-respond',
  }

  componentDidMount() {
    const { settingStore: { autoRespondStore } } = this.props;
    const { getEmailAutoRespondCondition } = autoRespondStore;
    getEmailAutoRespondCondition();
  }

  getInstance = (ref) => {
    if (!this.autoRichText) {
      this.autoRichText = ref;
    }
  }

  handleStatusChange = (status) => {
    if (status === 'ready') {
      this.richInstanceReady = true;
      this.autoRichText.focus('first');
    }
  }

  getForm = (form, fields) => {
    const { isFormInit } = form;
    let group = [];
    isFormInit && fields && fields.map((c) => {
      let items = [];
      c.items.map((field) => {
        items.push({ com: RenderForm(form, field) });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@tpu27b@${c.title}`} col={1} title={c.title} needTigger={true} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }

  getFormContent = (autoRichValue) => {
    const { prefixCls } = this.props;
    return (
      <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@59o0yg`} needTigger showGroup title={getLabel(18546, '回复内容')}>
        <div className={`${prefixCls}-formcontent`}>
          <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@eyj37v`}
            ref={this.getInstance}
            value={autoRichValue}
            ckConfig={{
              toolbar: [
                { name: 'document', items: ['Source'] },
                {
                  name: 'paragraph',
                  items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'],
                },
                { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor'] },
                {
                  name: 'basicstyles',
                  items: ['Bold', 'Italic', 'Underline', 'Strike'],
                },
                { name: 'insert', items: ['Image', 'Table', 'Smiley'] },
              ],
              height: 260,
              uploadUrl: '/api/blog/fileupload/uploadimage',
            }}
            onStatusChange={this.handleStatusChange}
          />
        </div>
      </WeaSearchGroup>
    );
  }

  onSubmit = () => {
    const { settingStore: { autoRespondStore } } = this.props;
    const { autoSubmit } = autoRespondStore;
    let content = '';
    if (this.richInstanceReady) {
      content = this.autoRichText.getData();
    }
    autoSubmit({ content });
  }

  render() {
    const { prefixCls, settingStore: { autoRespondStore } } = this.props;
    const { autoForm, autoFields, autoRichValue } = autoRespondStore;
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-form`}>
          { this.getForm(autoForm, autoFields) }
          { this.getFormContent(autoRichValue) }
          <div className={`${prefixCls}-form-tip`}>
            <p className="wea-f14">{ getLabel(558, '提示') }：</p>
            <p className="wea-f12">{ getLabel(384447, '*自动回复仅对外部邮件有效') }</p>
          </div>
        </div>
        <div className={`${prefixCls}-operate`}>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v9l5tp`} type="primary" onClick={this.onSubmit}>{getLabel(30986, '保存')}</Button>
          <WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@3fx6v5`} />
        </div>
      </div>
    );
  }
}

export default AutoRespond;
